<template>
  <div class="wrap">
    <a-drawer :title="title" placement="right" :closable="true" :visible="visible"
      :headerStyle="{ 'padding-top': '20px' }" width="495px" :after-visible-change="afterVisibleChange" zIndex="2"
      @close="onClose">
      <div>
        <a-modal v-model="modelVisible" title="部门列表" on-ok="handleOk" @cancel="noMoelSelect">
          <template slot="footer">
            <a-button key="back" @click="handleCancel"> 取消 </a-button>
            <a-button key="submit" type="primary" :loading="loading" @click="handleOk">
              确定
            </a-button>
          </template>
          <a-tree style="min-width: 170px;!important;margin-top:10px;max-height: 400px; overflow-y: auto;background-color: rgb(246, 224, 224); " ref="nodeTree"
            :tree-data="nodeData" :autoExpandParent="true" :defaultExpandParent="true" :replace-fields="replaceFields"
            :defaultExpandedKeys="[nodeData[0].id]" show-icon @select="selectDept">
          </a-tree>
        </a-modal>
      </div>
      <div class="set_drawer_div">
        <a-tabs default-active-key="1" @change="callback">
          <a-tab-pane key="1" tab="成员"> </a-tab-pane>
        </a-tabs>
      </div>
      <div id="components-form-demo-vuex">
        <a-form-model ref="ruleForm" :model="form" :rules="rules" layout="vertical">
          <a-form-model-item ref="nickName" label="昵称" prop="nickName">
            <a-input v-model="form.nickName" placeholder="请输入" />
          </a-form-model-item>
          <a-form-model-item label="部门" prop="department">
            <a-input v-model="form.department" readOnly placeholder="点击选择部门" @click="showModal" />
          </a-form-model-item>
          <a-form-model-item label="手机" prop="mobile ">
            <a-input v-model="form.mobile" placeholder="请输入手机号" />
          </a-form-model-item>
          <a-form-model-item ref="userName" label="用户名" prop="userName">
            <a-input v-model="form.userName" placeholder="请输入" />
          </a-form-model-item>
          <a-form-model-item ref="passWord" label="密码" prop="passWord">
            <a-input v-model="form.passWord" placeholder="请输入" />
          </a-form-model-item>
          <a-form-model-item ref="emial" label="邮箱" prop="emial">
            <a-input v-model="form.emial" placeholder="请输入" />
          </a-form-model-item>
          <a-form-model-item :wrapper-col="{ span: 14, offset: 4 }">
            <a-button type="primary" @click="onSubmit"> 确 定 </a-button>
            <a-button style="margin-left: 10px" @click="resetForm">
              重 置
            </a-button>
          </a-form-model-item>
        </a-form-model>
      </div>
    </a-drawer>

    <div>
      <a-row style="background: #fff;border-radius: 6px; ">
        <a-col :span="7" style=" overflow-y: auto;  padding: 10px;" >
          <div class="set_font_size"></div>
          <a-input-search style="width: 250px;" placeholder="请输入搜索的学校"  allow-clear />
          <a-tree style="min-width: 170px !important;height: calc(100vh - 250px) " :tree-data="nodeData"
            :autoExpandParent="true" :defaultExpandParent="true" defaultExpandAll show-icon @select="onSelect">
            <template #title="{ orgname, id }">
              <a-dropdown :trigger="['contextmenu']">
                <span>{{ orgname }}</span>
                <template #overlay>
                  <a-menu @click="({ key: menuKey }) => onContextMenuClick(id, menuKey)">
                    <a-menu-item key="1">编辑</a-menu-item>
                    <a-menu-item key="2">删除</a-menu-item>
                  </a-menu>
                </template>
              </a-dropdown>
            </template>
          </a-tree>
        </a-col>

        <a-col :span="17" style="border-left: 4px solid #edeff2;;min-height: calc(100vh - 198px);">
          <div style="margin: 15px;" >
            <div>
              <span style="color: #171a1d; font-weight: 600;font-size: 17px;">{{ deptName }}</span>
            </div>
            <div>
              <div style="
                  color: rgba(23, 26, 29, 0.6);
                  font-size: 14px;
                  display: flex;
                ">
                <a-statistic title="学生" :value="1" />
                <a-statistic title="家长" :value="0" style="margin-left: 20px" />
                <a-statistic title="校区负责人" :value="0" style="margin-left: 20px" />
              </div>
            </div>
            <div>
              学生列表排序时间
              <a-select default-value="1" style="width: 120px" @change="handleChange">
                <a-select-option value="1"> 加入时间 </a-select-option>
                <a-select-option value="2"> 姓名字母 </a-select-option>
              </a-select>
              <div style="position: absolute;right: 10px;display: inline-block;">
                <a-button style="margin-right: 15px;" v-if="isAdmin">
                  批量导入/修改
                </a-button>
                <a-button type="primary" @click="addUser" v-if="isAdmin">
                  <a-icon type="user-add" />添加成员
                </a-button>
              </div>
            </div>
          </div>
          <a-table style="margin: 15px" :columns="columns" :data-source="userInfo" bordered
            class="set_font_size"></a-table>
        </a-col>
      </a-row>

    </div>
  </div>
</template>

<script>
const columns = [
  {
    title: "学生姓名",
    dataIndex: "displayName",
    scopedSlots: { customRender: "name" },
  },
  {
    title: "班级",
    dataIndex: "department",
    scopedSlots: { customRender: "age" },
  },
  {
    title: "学生手机",
    dataIndex: "employeeNumber",
    scopedSlots: { customRender: "address" },
  },
  {
    title: "家长",
    dataIndex: "description",
    scopedSlots: { customRender: "address" },
  },
];

const data = [];
for (let i = 0; i < 100; i++) {
  data.push({
    key: i.toString(),
    name: `Edrward ${i}`,
    age: 32,
    address: `London Park no. ${i}`,
  });
}

// 数组对象中查找符合目标的对象
const parseArray = function (objArray, key, value) {
  for (let i in objArray) {
    let element = objArray[i];
    if (typeof element === "object") {
      let result = parseArray(element, key, value);
      if (result) return result;
    } else {
      if (i === key) {
        if (element === value) return objArray;
      }
    }
  }
};

import contacts from "@/api/organizations";
export default {
  name: "index1",
  data() {
    this.cacheData = data.map((item) => ({ ...item }));
    return {
      form: {
        nickName: "",
        departmentId: "",
        department: undefined,
        mobile: undefined,
        userName: "",
        passWord: "",
        emial: "",
      },
      modelSelectValue: { name: "", id: "" },
      rules: {
        nickName: [
          { required: true, message: "昵称不能为空", trigger: "blur" },
        ],
        department: [
          { required: true, message: "部门不能为空", trigger: "change" },
        ],
        mobile: [
          { required: true, message: "部门不能为空", trigger: "change" },
          {
            min: 11,
            max: 11,
            message: "请输入正确的手机格式",
            trigger: "change",
          },
        ],
        userName: [
          { required: true, message: "用户名不能为空", trigger: "change" },
          { min: 6, max: 14, message: "请输入6-14位字符", trigger: "change" },
        ],
        passWord: [
          { required: true, message: "请输入密码", trigger: "change" },
          {
            min: 6,
            max: 50,
            message: "输入有误!密码最少6位字符",
            trigger: "change",
          },
        ],
      },
      data,
      columns,
      editingKey: "",
      deptName: "",
      userInfo: [],
      title: "",
      visible: false,
      modelVisible: false,
      replaceFields: {
        title: "orgname",
        key: "id",
        child: "children",
      },
      nodeData: [{}],
      isAdmin:false,
      codeLine: "",
      selectedKeys: null,
      filterResource: null,
    };
  },
  async created() {
    // 树的获取
    let res = await contacts.getOrganizations(); // 获取树节点信息的函数
    this.deptName = res.data[0].orgname;
    this.nodeData = res.data;

  },
  mounted() { 
    this.getRole()
  },

  methods: {
    getRole() {
      contacts.getRoleByUser().then((res) => {
        // this.roleId = res.data.data.deptCodeRole[0].code;
        for (let i = 0; i < res.data.data.deptCodeRole.length; i++) {
          if (res.data.data.deptCodeRole[i].code == "t001") {
            this.isAdmin = true;
          }
        }
      });
    },
    onContextMenuClick() { },
    canclModel(e) {
      this.modelSelectValue = null;
    },
    handleCancel(e) {
      this.form.department = "";
      this.form.departmentId = "";
      this.modelVisible = false;
    },
    showModal() {
      this.modelVisible = true;
    },
    handleOk() {
      this.modelVisible = false;
    },
    showDrawer() {
      this.visible = true;
    },
    onClose() {
      (this.form = {
        nickName: "",
        departmentId: "",
        department: undefined,
        mobile: undefined,
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      }),
        (this.visible = false);
    },
    noMoelSelect() {
      this.form.department = "";
      this.form.departmentId = "";
    },
    onSubmit() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          alert("submit!");
        } else {
          return false;
        }
      });
    },
    resetForm() {
      this.$refs.ruleForm.resetFields();
    },
    addUser() {
      this.title = "添加成员";
      this.showDrawer();
    },
    getAllDept() {
      contacts.getOrganizations().then(() => { });
    },
    async nodeHandle() { },
    handleChange(value, key, column) {
      const newData = [...this.data];
      const target = newData.find((item) => key === item.key);
      if (target) {
        target[column] = value;
        this.data = newData;
      }
    },
    edit(key) {
      const newData = [...this.data];
      const target = newData.find((item) => key === item.key);
      this.editingKey = key;
      if (target) {
        target.editable = true;
        this.data = newData;
      }
    },
    save(key) {
      const newData = [...this.data];
      const newCacheData = [...this.cacheData];
      const target = newData.find((item) => key === item.key);
      const targetCache = newCacheData.find((item) => key === item.key);
      if (target && targetCache) {
        delete target.editable;
        this.data = newData;
        Object.assign(targetCache, target);
        this.cacheData = newCacheData;
      }
      this.editingKey = "";
    },
    cancel(key) {
      const newData = [...this.data];
      const target = newData.find((item) => key === item.key);
      this.editingKey = "";
      if (target) {
        Object.assign(
          target,
          this.cacheData.find((item) => key === item.key)
        );
        delete target.editable;
        this.data = newData;
      }
    },
    selectDept(params, e) {
      this.form.department = e.node._props.title;
      this.form.departmentId = params[0];
    },
    async onSelect(params, e) {
      this.deptName = e.selectedNodes[0].data.props.orgname;
      if (this.filterResource) {
        this.$set(this.filterResourceF, "scopedSlots", {});
      }
    },
  },
};
</script>

<style lang="less" scoped>
.ant-tree-node-selected{
  background-color: rgb(246, 224, 224) !important;
}
.wrap {
  position: relative;
}

.ant-statistic {
  display: flex !important;
}

/deep/ .ant-statistic-title {
  margin-top: 10px !important;
}

.set_button_margin_left {
  margin-left: 15px;
}

.set_font_size {
  font-size: 14px;
}
</style>

<style lang="less">
.ant-drawer-title {
  margin: 0;
  color: rgba(0, 0, 0, 0.85);
  font-weight: 500;
  font-size: 14px;
  line-height: 22px;
}

.set_drawer_div {
  margin-top: -15px;
  width: 490px;
  height: 48px;
  font-weight: 500;
  color: #171a1d;
  font-size: 14px;
}
</style>
